<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器.</title>
		<style>
			/* 伪类选择器:  语法：任意选择器：hover 【悬停】  每个伪类选择器，具备特点
			               所有元素具备：hover   【常见伪类选择类】
			*/
		   h1:hover{
			   background: #ffaa00;
			   color: #00ffff;
		   }
		   /*
		    *伪类选择器：     ：link      链接未点击时状态
			*                ：active    链接被点击时状态
			*                ：visited   链接点击后状态
			*                ：hover     悬停链接时状态
			* 主要结合在一起，针对a元素效果
		   */
		  a:link{/*未访问状态*/
			  color: #00ffff;
			  /*去掉超链接下划线*/
			  text-decoration: none;
		  }
		  a:active{
			  color: #ffff7f;
			  background: #ffaa00;
		  }
		  a:visited{
			  color:#ff0000;
			  background: #00ffff;
		  }
		  a:hover{
			  font-size: 36px;
		  }
		  /**
		   * 伪类选择器：  input：focus 获取焦点   鼠标点击时输入框时效果
		   * 
		   针对 输入框 input元素
		   */
		  input:focus{
			  background: #ffaa00;
		  }
		  /**伪类选择器：           ：first-child  第一个儿子元素
		                           ：last-child  最后一个儿子元素
								  ：nth-child(n) 匹配n个儿子元素
		    针对：父子级  默认父子级table、列表..
		   */
		   li:first-child{
			   background: #00ffff;   
			   color: #ffff7f;
		   }
		   li:last-child{
			   font-size: 15pt;
		   }
		   li:nth-child(2){
			   background: #00ffff;
			  font-size: 15pt;
		   }
		   li:nth-child(3){
			   background: #00ffff;
			   font-size: 15pt;
		   }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>